<script  lang="ts" name="set_user">
import { defineComponent, onMounted, onActivated , reactive, ref, toRaw } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getUserList,
  userSave,
  getDeptTree,
  delUser,
} from "@/api/server_set_account";
export default defineComponent({
  name: "set-user",
  setup() {
    const isEdit = ref(false);
    const height = ref(0);
    const dialogVisible_add = ref(false);

    const listParams = ref({
      page: 1,
      pageSize: 20,
    });
    const List = ref([]);
    const total = ref(0);

    const deptOptions = ref([]);

    const currentPage = ref(1);
    const formData = ref<any>({
      name: "",
      phone: "",
      dept_id: "",
      user_id: "",
    });
    const cascaderProps = reactive({
      label: "label",
      value: "id",
      children: "children",
      checkStrictly: true,
      emitPath: false,
    });
    const addItem = () => {
      isEdit.value = false;
      formData.value = {}
      dialogVisible_add.value = true;
    };
    const openChangePassword = () => {};
    const edit = (row: any) => {
      isEdit.value = true;
      formData.value = {
        ...row,
      };
      dialogVisible_add.value = true;
    };
    const remove = (row: any) => {
      ElMessageBox.confirm(
        `<span>确定要删除人员 <i style="color:#58B2C5;">${row.name}</i> 吗</span>`,
        "提 示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          dangerouslyUseHTMLString: true,
          type: "warning",
        }
      ).then(async () => {
        let res = await delUser({
          id: row.user_id,
        });
        if (res.result == "success") {
          dialogVisible_add.value = false;
          //添加完成后重新获取数据
          getList(0);
          ElMessage({
            type: "success",
            message: "删除成功!",
          });
        }
      });
    };
    const handleSizeChange = (val: number) => {
      listParams.value.pageSize = val;
      getList(listParams.value.page);
    };
    const handleCurrentChange = (val: number) => {
      getList(val);
    };
    const confirmAdd = async () => {
      let form = formData.value;
      let res = await userSave({
        id: isEdit ? form.user_id : 0,
        deptId: form.dept_id,
        name: form.name,
        phone: form.phone,
      });
      if (res.result == "success") {
        dialogVisible_add.value = false;
        //添加完成后重新获取数据
        getList(0);
      }
      dialogVisible_add.value = false
    };
    const getList = async (page: number) => {
      let res = await getUserList({
        ...toRaw(listParams.value),
        page,
      });
      if (res.result == "success") {
        List.value = res.list;
        total.value = Number(res.total);
      }
    };
    const getDeptInfo = async () => {
      let res = await getDeptTree();
      if (res.result == "success") {
        deptOptions.value = res.deptTree;
      }
    };

    onMounted(() => {
      let pageTable: any = document.querySelector(".page-table");
      height.value = pageTable.clientHeight;
      console.log(height);
      getList(1);
      getDeptInfo();
    });
    return {
      height,
      addItem,
      isEdit,
      listParams,
      List,
      total,
      remove,
      edit,
      dialogVisible_add,
      openChangePassword,
      currentPage,
      handleSizeChange,
      handleCurrentChange,
      formData,
      confirmAdd,
      cascaderProps,
      deptOptions,
    };
  },
});
</script>

<template>
  <div class="user-page">
    <div class="page-top">
      <h4>人员配置</h4>
      <el-button type="primary" size="small" @click="addItem"
        >新增人员</el-button
      >
    </div>
    <div class="page-table">
      <el-table ref="table" v-if="height" :data="List" :height="height">
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="电话" prop="phone"></el-table-column>
        <el-table-column label="部门" prop="deptName"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button link size="small" @click="edit(row)"
              >编辑</el-button
            >
            <el-button link size="small" @click="remove(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:currentPage="currentPage"
        :page-sizes="[20, 50, 80, 100]"
        :page-size="listParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
   <el-dialog :close-on-click-modal="false"
      :title="isEdit ? '编辑用户' : '新增用户'"
      v-model="dialogVisible_add"
      width="400px"
    >
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="姓名">
          <el-input type="text" v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input type="text" v-model="formData.phone"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-cascader
            style="width: 100%"
            :props="cascaderProps"
            v-model="formData.dept_id"
            :options="deptOptions"
            clearable
          ></el-cascader>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible_add = false">取 消</el-button>
          <el-button type="primary" @click="confirmAdd">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.user-page {
  width: 100%;
  height: 100%;
  .page-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .page-table {
    margin: 16px 0;
    height: calc(100% - 100px);
  }
}
</style>
